<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <div class="header d-flex">
      <el-form inline>
        <el-form-item :label="$t('biaoqianguanli.staff_name')" prop="personId">
          <el-select
            v-model="personId"
            :placeholder="$t('biaoqianguanli.person_id_required')"
          >
            <el-option
              v-for="item in user_name_list"
              :key="item.value"
              :label="item.user_name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <MyDatePicker v-model="startTime"> </MyDatePicker>
        </el-form-item>
        <el-form-item :label="$t('zhuapaijilu.zhi')">
          <MyDatePicker v-model="endTime"> </MyDatePicker>
        </el-form-item>

        <el-form-item :label="$t('jizhanguanli.map_id')" prop="mapId">
          <el-select
            v-model="mapId"
            :placeholder="$t('jizhanguanli.map_id_required')"
            @change="chooseMap"
            :style="{ width: '100%' }"
            clearable
          >
            <el-option
              v-for="item in mapListData"
              :key="item.mapId"
              :label="item.mapName"
              :value="item.mapId"
            ></el-option>
          </el-select>
        </el-form-item>

        <MyButton class="confirm" @click="handleConfirm">{{
          $t("common.confirmQueding")
        }}</MyButton>
      </el-form>
    </div>
    <div
      class="moving-div"
      :style="{ backgroundImage: 'url(' + base64Image + ')' }"
    >
     <i id="app" class="el-icon-location inner-div" style="font-size: 30px;" v-for="(item, index) in innerDivs"  :key="index" :style="{
          top: item.top + 'px',
          left: item.left + 'px',
          animation: 'blink 1s 3 alternate',
        }" ></i>
      <!-- <img
        src="../../assets/map-marker.png"
        v-for="(item, index) in innerDivs"
        :key="index"
        class="inner-div"
        :style="{
          top: item.top + 'px',
          left: item.left + 'px',
          animation: 'blink 1s 3 alternate',
        }"
      /> -->
    </div>
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getPersonRecordList, deleteStation, getImg } from "./service";
import { getMapList } from "@/views/maps/service";
import { getPersonList } from "@/views/label/service";
import EditDialog from "./EditDialog.vue";
import util from "@/utils";
export default {
  components: {
    MyButton,
    EditDialog,
  },
  data() {
    return {
      personId: null,
      user_name_list: null,
      mapId: null,
      mapListData: [],
      base64Image: "",
      stationName: "",
      startTime: "2024-05-01",
      endTime: "2024-07-31",
      tableData: [],
      row: {},
      editType: "add",
      isAddDialogShow: false,
      lib_type: void 0,
      divTop: 0,
      divLeft: 0,
      blinkAnimation: false,
      innerDivs: [],
      recordList: [],
      index: 0,
      currentValue: null,
    };
  },
  mounted() {
    this.getList();
    this.getMap();
    this.getPList();
  },
  methods: {
    handleManagement(row) {
      // 陌生人口
      if (row.lib_type === 0) {
        this.$router.push({
          name: "greyList",
        });
        localStorage.setItem("curR", "library");
      } else {
        this.$router.push({
          name: "targets",
          query: { lib_name: row.lib_name, lib_id: row.lib_id },
        });
      }
    },
    handleConfirm() {
      if (this.personId == null) {
        this.$message.warning(this.$t("biaoqianguanli.person_id_required"));
        return;
      }
      if (this.mapId == null) {
        this.$message.warning(this.$t("jizhanguanli.map_id_required"));
        return;
      }
      this.getRecordList();
      // const containerWidth = 400;
      // const containerHeight = 300;
      // const newDiv = {
      //   top: Math.random() * containerHeight + 100,
      //   left: Math.random() * containerWidth + 50,
      //   blink: true,
      // };
      // setTimeout(() => {
      //   newDiv.blink = false;
      // }, 3000); // Reset blink animation after 5 seconds
      // if (this.innerDivs.length >= 5) {
      //   // this.innerDivs.shift();
      //   this.innerDivs = [];
      // }
      // this.innerDivs.push(newDiv);
    },
    async getList() {
      const res = await getImg(["4ee96255bcf46d448d160480826c87f1.jpg"]);
      this.base64Image = "data:image/jpg;base64," + res.data;
      console.log(res);
    },
    //查询通行记录
    async getRecordList() {
      const res = await getPersonRecordList({
        personId: this.personId,
        mapId: this.mapId,
        startTime: this.startTime,
        endTime: this.endTime,
      });
      if (res.code == 200) {
        console.log(res.data);
        this.recordList = res.data;
        this.getNextValue();
      }
      return true;
    },
    getNextValue() {
      if (this.index < this.recordList.length) {
        this.currentValue = this.recordList[this.index];
        this.index++;

        const newDiv = {
          top: this.currentValue.positionY,
          left: this.currentValue.positionX,
          blink: true,
        };

        setTimeout(() => {
          newDiv.blink = false;
        }, 3000);

        this.innerDivs.push(newDiv);

        if (this.index < this.recordList.length) {
          this.timer = setTimeout(this.getNextValue, 5000);
        }
      } else {
        this.currentValue = null; // 数组取完后设为null，显示结束信息
      }
    },

    async getPList() {
      const res = await getPersonList();
      if (res.code == 200) {
        res.data = res.data.map((item) => {
          return { user_name: item.name, value: item.personId };
        });
        console.log(res.data);
        this.user_name_list = res.data;
      }
      return true;
    },
    chooseMap() {
      const data = this.mapListData.find(
        (item) => item.mapId === this.formData.mapId
      );
      if (data.imgUrl) {
        getImg(data.imgUrl).then((res) => {
          if (res.code == 200) {
            this.baseImg = "data:image/jpeg;base64," + res.data;
          }
        });
      }
    },
    async getMap() {
      const res = await getMapList();
      this.mapListData = res.data;
    },
    handleAdd() {
      this.isAddDialogShow = true;
      this.editType = "add";
    },
    handleEdit(row) {
      this.isAddDialogShow = true;
      this.editType = "edit";
      this.row = { ...row };
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("jizhanguanli.deletePromit"),
        this.$t("jizhanguanli.delete_station"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        let res = await deleteStation([row.stationId]);
        if (res.code == 200) {
          util.msg.success("deleteSuccess");
          this.getList();
        }
        // 直接删除
      });
    },
  },
};
</script>

<style lang="less">
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
.moving-div {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  border: 1px solid #ccc;
  overflow: hidden;
  background-size: 100% 100%; /* 拉伸背景图片以填充整个背景区域 */
  background-position: center; /* 将背景图片在背景区域中居中显示 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

.inner-div {
  position: absolute;
  // width: 25px;
  // height: 25px;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>
